<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<style>
		html,
		body {
			margin: 0;
			bottom: 0;
			width: 140px;
			height: 180px;
			overflow: hidden;
		}

		.phone-box {
			width: 140px;
			border-radius: 8px;
			overflow: hidden;
			/* background-color: red; */
		}

		.f60 {
			background-color: #f60;
		}

		.f00 {
			background-color: #f00;
		}

		.fa0 {
			background-color: #ffaa00;
		}

		.ccc {
			background-color: #ccc;
		}

		.box-item {
			width: 140px;
			padding: 5px 20px;
			padding-left: 10px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
		}

		.text {
			color: #fff;
			margin-left: 4px;
			font-size: 18px;
		}

		.controll-box {
			transition: all 0.3s ease;
			max-height: 120px;
			overflow: hidden;
		}

		.controll-box.hidden {
			max-height: 0;
			opacity: 0;
		}
	</style>

	<body>
		<div class="phone-box">
			<div class="show-box box-item f60">
				<svg t="1740214764425" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5096" width="34" height="34">
					<path
						d="M838.4 569.6c-3.2 9.6-6.4 16-12.8 19.2-6.4 3.2-12.8 6.4-19.2 6.4H800c-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 12.8-67.2 0-137.6-38.4-198.4-38.4-57.6-99.2-99.2-169.6-112-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-16 16-25.6 32-25.6h6.4c179.2 35.2 294.4 208 259.2 387.2zM694.4 384c35.2 51.2 48 115.2 35.2 176-3.2 9.6-6.4 16-12.8 19.2-6.4 3.2-12.8 6.4-19.2 6.4h-6.4c-16-3.2-28.8-19.2-25.6-38.4 9.6-44.8 0-89.6-25.6-128-25.6-38.4-64-64-108.8-73.6-19.2-3.2-28.8-22.4-25.6-38.4 3.2-16 16-25.6 35.2-25.6h6.4c57.6 12.8 112 48 147.2 102.4z m-73.6 166.4c-3.2 9.6-6.4 16-12.8 19.2-9.6 6.4-16 6.4-22.4 6.4h-6.4c-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-19.2 0-38.4-9.6-57.6-12.8-16-28.8-28.8-48-32-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-16 16-25.6 35.2-25.6h6.4c73.6 16 124.8 89.6 108.8 166.4z m-259.2-169.6s-41.6 16-48 19.2c-6.4 3.2-9.6 9.6-9.6 19.2 16 48 41.6 99.2 73.6 147.2 28.8 44.8 67.2 89.6 105.6 121.6 3.2 3.2 6.4 3.2 9.6 3.2 3.2 0 6.4-3.2 9.6-6.4 6.4-6.4 16-19.2 25.6-28.8 19.2-19.2 35.2-25.6 51.2-25.6 3.2 0 9.6 0 12.8 3.2 3.2 0 9.6 3.2 19.2 9.6 3.2 0 41.6 25.6 73.6 57.6 12.8 12.8 32 32 32 54.4 0 16-9.6 32-28.8 48-3.2 3.2-44.8 41.6-108.8 41.6-19.2 0-35.2-3.2-54.4-9.6-19.2-6.4-38.4-16-57.6-25.6-76.8-44.8-134.4-99.2-188.8-182.4-96-140.8-99.2-262.4-96-288 0-105.6 89.6-147.2 99.2-150.4 12.8-6.4 25.6-9.6 38.4-9.6 6.4 0 9.6 0 16 3.2 9.6 3.2 22.4 9.6 32 28.8 12.8 25.6 25.6 64 32 105.6 6.4 41.6-16 54.4-38.4 64z"
						fill="#ffffff" p-id="5097"></path>
				</svg>
				<span class="text time">00:00:00</span>
			</div>
			<div class="controll-box">
				<div class="box-item fa0 sound-box">
					<div class="sound" style="display: none;">
						<svg t="1740281925219" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="5573"
							data-spm-anchor-id="a313x.search_index.0.i3.646b3a81DlK1dj" width="34" height="34">
							<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#ffffff"
								p-id="5574" data-spm-anchor-id="a313x.search_index.0.i2.646b3a81DlK1dj"
								class="selected"></path>
							<path
								d="M625.995294 419.915294c52.329412 52.329412 52.931765 136.809412 1.731765 189.891765l-1.731765 1.807059-21.308235-21.308236c40.583529-40.583529 41.185882-106.089412 1.65647-147.425882l-1.65647-1.656471 21.308235-21.308235z m47.887059-47.887059c78.607059 78.607059 79.36 205.552941 2.334118 285.06353l-2.334118 2.409411-21.308235-21.308235c66.936471-66.936471 67.614118-175.058824 2.032941-242.898823l-2.032941-2.032942 21.308235-21.232941zM554.767059 328.282353c1.581176 2.409412 2.409412 5.270588 2.409412 8.207059v351.09647a15.058824 15.058824 0 0 1-15.058824 15.058824c-2.936471 0-5.797647-0.828235-8.207059-2.409412L406.588235 617.411765H316.235294c-16.64 0-30.117647-13.477647-30.117647-30.117647V436.705882c0-16.64 13.477647-30.117647 30.117647-30.117647h90.352941l127.322353-82.748235c7.002353-4.517647 16.263529-2.56 20.856471 4.442353z"
								fill="#2c2c2c" p-id="5575" data-spm-anchor-id="a313x.search_index.0.i1.646b3a81DlK1dj"
								class="selected"></path>
						</svg>
					</div>
					<div class="no-sound">
						<svg t="1740290795467" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="21550" width="34" height="34">
							<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#ffffff"
								p-id="21551" data-spm-anchor-id="a313x.search_index.0.i28.646b3a813GgG22" class="">
							</path>
							<path
								d="M329.536 414.72l228.8 245.333333v15.104c0 26.069333-30.421333 38.72-47.466667 19.733334L431.616 618.346667H334.826667c-18.986667 0-34.538667-15.445333-36.053334-35.093334l-0.106666-3.136v-127.573333c0-19.114667 13.312-35.114667 30.869333-37.824zM630.442667 356.181333l0.042666 0.021334c52.266667 28.138667 89.386667 83.285333 94.869334 148.074666v33.493334c-4.309333 50.901333-28.16 95.872-63.530667 126.464l-25.514667-27.370667c33.493333-27.498667 53.632-70.122667 53.610667-115.84v-0.042667c0-55.317333-29.44-105.92-76.117333-130.837333l16.64-33.962667z m-30.421334 62.101334c31.68 19.690667 51.626667 54.976 53.248 93.568l0.106667 5.290666c0.064 36.266667-16.128 70.186667-43.221333 91.690667l-25.728-27.584v-0.042667c19.221333-13.205333 31.274667-35.221333 32.661333-59.242666l0.128-4.821334c0.064-26.368-12.757333-50.88-33.898667-64.853333l16.704-33.984v-0.021333z m-41.642666-69.44l-0.021334 204.437333-128.064-137.301333 2.56 0.042666 78.037334-86.912c17.045333-18.986667 47.488-6.336 47.488 19.733334z"
								fill="#2c2c2c" p-id="21552" data-spm-anchor-id="a313x.search_index.0.i29.646b3a813GgG22"
								class="selected"></path>
							<path
								d="M291.875576 327.773872m15.602212-14.549299l0 0q15.602212-14.549298 30.151511 1.052914l349.18316 374.453096q14.549298 15.602212-1.052914 30.15151l0 0q-15.602212 14.549298-30.15151-1.052914l-349.183161-374.453095q-14.549298-15.602212 1.052914-30.151511Z"
								fill="#2c2c2c" p-id="21553" data-spm-anchor-id="a313x.search_index.0.i30.646b3a813GgG22"
								class=""></path>
						</svg>
					</div>
					<div class="text">免提</div>
				</div>
				<div class="box-item f00 hangup-box">
					<svg t="1740283089495" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="14812" width="34" height="34">
						<path d="M64.2 511.8a447.6 447.6 0 1 0 895.2 0 447.6 447.6 0 1 0-895.2 0z" fill="#ffffff"
							p-id="14813" data-spm-anchor-id="a313x.search_index.0.i14.646b3a813GgG22" class="selected">
						</path>
						<path
							d="M280.4 472.1l5.5-7.5 26.9-20.2s198-109.7 410.8 2c0 0 53 49.5 13.4 115.6l-12.8 12.8-115.7-39.1s-20.4-10.3-13-38.6c0 0 7.4-24.1-22.8-28.8 0 0-75.4-17.7-138-0.8 0 0-11.6 2.1-6.1 16 0 0 13 38.6 0.2 51.4l-115.3 38s-22.5 4.5-25.8-25.8c-0.2-0.2-14-47.2-7.3-75z"
							fill="#d81e06" p-id="14814" data-spm-anchor-id="a313x.search_index.0.i15.646b3a813GgG22"
							class=""></path>
					</svg>

					<div class="text">挂断</div>
				</div>
			</div>
		</div>
		<script>
			let phoneBoxDom = document.querySelector('.phone-box');
			// let showBoxDom = document.querySelector('.show-box');
			let timeBoxDom = document.querySelector('.time');
			let soundBoxDom = document.querySelector('.sound-box');
			let hangupBoxDom = document.querySelector('.hangup-box');
			let timer = null;
			let time = 0;

			console.log(phoneBoxDom);
			phoneBoxDom.addEventListener('click', () => {
				// Android.resize(width, height, [windowId])
				// putCallback('todo', {
				// 	type: 'take-box',
				// })
			})

			// showBoxDom.addEventListener('click', () => {
			// 	const controllBox = document.querySelector('.controll-box');
			// 	if (controllBox.classList.contains('hidden')) {
			// 		// 展开时先恢复显示
			// 		controllBox.style.display = 'block';
			// 		// 强制重绘确保过渡生效
			// 		requestAnimationFrame(() => {
			// 			controllBox.classList.remove('hidden');
			// 		});
			// 		Android.resize(140, 180);
			// 	} else {
			// 		// 收起时添加隐藏类
			// 		controllBox.classList.add('hidden');
			// 		// 动画结束后完全隐藏
			// 		controllBox.addEventListener('transitionend', () => {
			// 			controllBox.style.display = 'none';
			// 		}, {
			// 			once: true
			// 		});
			// 		Android.resize(140, 90);
			// 	}
			// })

			soundBoxDom.addEventListener('click', () => {
				let childList = soundBoxDom.children;
				for (let node of childList) {
					if (node.classList.contains('sound') || node.classList.contains('no-sound')) {
						let status = node.style.display === 'none';
						// 直接判断内联样式 + 切换显示状态
						node.style.display = status ? 'block' : 'none';
						if (node.classList.contains('sound') && status) {
							putCallback('todo', {
								type: 'changeSound',
								sound: 'sound'
							})
						}
						if (node.classList.contains('no-sound') && status) {
							putCallback('todo', {
								type: 'changeSound',
								sound: 'no-sound'
							})
						}
					}
				}
			})

			hangupBoxDom.addEventListener('click', () => {
				if (timer) clearInterval(timer);
				time = 0;
				putCallback('todo', {
					type: 'closeFloatWeb'
				})
			})


			startTime();


			function startTime() {
				if (timer) clearInterval(timer);
				timer = setInterval(() => {
					time += 1;
					let text = getTextTime(time);
					timeBoxDom.innerHTML = text;
				}, 1000)
			}

			function getTextTime(seconds) {
				let hours = Math.floor(seconds / 3600);
				let minutes = Math.floor((seconds % 3600) / 60);
				let secs = seconds % 60;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				secs = secs < 10 ? '0' + secs : secs;
				return hours + ':' + minutes + ':' + secs;
			}
		</script>
	</body>

</html>